<template>
  <div class="search-navbar" :style="navbarStyle">
    <div class="search-container">
      <div class="search-box" @click="handleSearchClick">
        <Icon icon="ep:search" class="search-icon" />
        <span class="search-placeholder">{{ property.searchPlaceholder }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { SearchNavbarProperty } from './config'

defineOptions({ name: 'SearchNavbar' })

const props = defineProps<{
  property: SearchNavbarProperty
}>()

// 计算导航栏样式
const navbarStyle = computed(() => {
  const style = props.property.style
  return {
    backgroundColor: style.bgType === 'color' ? style.bgColor : 'transparent',
    backgroundImage: style.bgType === 'img' ? `url(${style.bgImg})` : 'none',
    marginTop: style.marginTop + 'px',
    marginBottom: style.marginBottom + 'px',
    marginLeft: style.marginLeft + 'px',
    marginRight: style.marginRight + 'px',
    paddingTop: style.paddingTop + 'px',
    paddingBottom: style.paddingBottom + 'px',
    paddingLeft: style.paddingLeft + 'px',
    paddingRight: style.paddingRight + 'px',
    borderRadius: style.borderRadius + 'px'
  }
})

// 处理搜索点击
const handleSearchClick = () => {
  // 这里可以触发搜索功能或跳转到搜索页面
  console.log('搜索点击')
}
</script>

<style scoped lang="scss">
.search-navbar {
  position: relative;
  width: 100%;
  z-index: 999;
  
  .search-container {
    padding: 12px 16px;
    
    .search-box {
      display: flex;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 20px;
      padding: 8px 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      
      .search-icon {
        color: #999;
        margin-right: 8px;
        font-size: 16px;
      }
      
      .search-placeholder {
        color: #999;
        font-size: 14px;
        flex: 1;
      }
    }
  }
}
</style>

